<template>
  <div class="story-page">
    <div class="pc">
      <div class="s-p-top">
        <img :src="images.title" />
      </div>

      <div class="s-p-center">
        <div class="center-nav">
          <div
            v-for="(item, index) in nav_data"
            :key="index"
            class="nav-line"
            :class="{ 'nav-active': index === currentNav }"
            @click="changeNav(index)"
          >
            <div class="line-font">
              <span>{{ item.id_name }}</span>
              <span>{{ item.title }}</span>
            </div>
            <transition name="fade">
              <img v-show="index === currentNav" :src="images.arrow_right" />
            </transition>
          </div>
        </div>

        <div class="center-content">
          <div class="c-c-title">{{ nav_data[currentNav].title }}</div>

          <div class="c-c-content">
            <div class="content-left">
              <div class="left-desc" ref="ccDesc">
                <p
                  v-for="(item, index) in nav_data[currentNav].contents"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
            </div>

            <div class="content-right">
              <img :src="images.cartoon" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mobile">
      <div class="s-p-top">
        <img :src="images.title" />
      </div>

      <div class="s-p-nav">
        <ul>
          <li
            :class="{ 'm-nav-active': currentNav === index }"
            v-for="(item, index) in nav_data"
            :key="index"
            @click="changeNav(index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>

      <div class="s-p-content">
        <!-- <div class="content-media">
          <img :src="images.start" />
        </div> -->
        <div class="content-desc" ref="mCCDesc">
          <p
            v-for="(item, index) in nav_data[currentNav].contents"
            :key="index"
          >
            {{ item }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StoryPage",
  data() {
    return {
      // static
      images: {
        title: require("@/assets/images/story/story_title.png"),
        cartoon: require("@/assets/images/story/story_cartoon.png"),
        arrow_right: require("@/assets/images/story/story_arrow_right.png"),
        start: require("@/assets/images/home/home_video_start.png"),
      },
      // current nav
      currentNav: 0,
      nav_data: [
        {
          id: 1,
          id_name: "01.",
          title: "IP Background",
          contents: [
            "AotuWorld is a 3D anime series, and there are already comic, anime and game series. It has an excellent reputation and wide audience in China, Japan, Korea and other countries.",
            "In 2015, the anime section 0 was officially aired, with a total of 11.1 billion visits to the whole network so far.",
            "In July 2021, 《AotuWorld》with Robleth to launch an open creation program for fans.",
            "In May 2022, AotuWorld entered into a partnership with the world's leading complete AI Xiaobing framework to launch a new meta-universe game based on AotuWorld's IP.",
            "In July 2022, the AotuNFT distribution plan was launched to start web3 fans open co-creation",
          ],
        },
        {
          id: 2,
          id_name: "02.",
          title: "Aotu Competition",
          contents: [
            "The creator gods created countless planets and people in the AotuWorld, and ruled them as they pleased - some rich and beautiful, some barren and desolate, some enjoying freedom and happiness, and some bearing heavy taxes and hard labor.",
            "If anyone wants to change their destiny and realize their wishes, then go to the “Aotu  Contest”.",
            "Are you willing to embark on the journey together with the main character of the story?",
          ],
        },
      ],
      // mobile current nav
      m_currentNav: 0,
    };
  },
  methods: {
    // change nav (first second)
    changeNav(payload) {
      const ccDesc = this.$refs.ccDesc;
      const mCCDesc = this.$refs.mCCDesc;
      ccDesc.scrollTop = 0;
      mCCDesc.scrollTop = 0;
      this.currentNav = payload;
    },
  },
};
</script>

<style lang="less" scoped>
.story-page {
  position: relative;
  width: 100%;
  height: 1080px;
  background-image: url("../../assets/images/story/story_background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-top: -20px;
  z-index: 7;

  .mobile {
    display: none;
  }

  .pc {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    // story page top
    .s-p-top {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 364px;
      margin-top: 120px;

      img {
        display: block;
        width: 100%;
      }
    }

    // story page center
    .s-p-center {
      display: flex;
      margin-top: 97px;
      transform: translateX(-40px);

      .center-nav {
        width: 340px;
        // border: 1px solid red;

        .nav-line {
          // position: relative;
          display: flex;
          height: 50px;
          cursor: pointer;
          margin-bottom: 30px;
          // border: 1px solid yellow;

          .line-font {
            display: flex;
            align-items: flex-end;
            // border: 1px solid purple;

            span {
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #ffffff;
              opacity: 0.6;
              transition: opacity 0.3s ease;
              word-break: keep-all;
              white-space: nowrap;
            }
            span:nth-child(1) {
              font-size: 50px;
              line-height: 50px;
            }
            span:nth-child(2) {
              font-size: 22px;
              line-height: 32px;
              margin-left: 10px;
            }
          }

          img {
            // position: absolute;
            // right: 10px;
            // top: 22px;
            width: 20px;
            height: 20px;
            margin-left: 30px;
            margin-top: 22px;
          }
        }
      }

      .center-content {
        width: 940px;
        height: 600px;
        box-sizing: border-box;
        padding: 60px 0 0 60px;
        // border: 1px solid blue;

        .c-c-title {
          font-size: 30px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 30px;
        }

        .c-c-content {
          display: flex;
          margin-top: 30px;

          .content-left {
            width: 485px;
            height: 420px;
            padding-right: 20px;
            box-sizing: border-box;
            overflow: auto;

            .left-desc {
              margin-top: 20px;
              p {
                margin: 0;
                padding: 0;
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 22px;
                margin-bottom: 20px;
              }
            }
          }

          .content-left::-webkit-scrollbar {
            // display: none;
            width: 5px;
            border-radius: 3px;
          }
          .content-left::-webkit-scrollbar-track {
            border-radius: 3px;
            background: rgba(0, 0, 0, 0.1);
          }
          .content-left::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background: #edaf33;
          }

          .content-right {
            height: 420px;
            padding-left: 14px;
            img {
              width: 381px;
              transform: translateY(-6px);
            }
          }
        }
      }
    }

    // active
    .nav-active {
      span {
        opacity: 1 !important;
      }
    }
    .li-active {
      opacity: 1 !important;
    }

    // animate
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.3s ease;
    }
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }
  }
}

@media screen and (max-width: 768px) {
  .story-page {
    height: 154.6667vw;
    margin-top: 0;
    background-image: url("../../assets/images/story/m_story_background.png");

    .pc {
      display: none;
    }

    .mobile {
      display: flex;
      flex-direction: column;

      .s-p-top {
        margin: 0 auto;
        margin-top: 6.6667vw;

        img {
          width: 48vw;
        }
      }

      .s-p-nav {
        position: relative;
        box-sizing: border-box;
        min-height: 9.0667vw;
        margin-top: 4.5333vw;
        margin-left: 4vw;
        overflow: auto;

        ul,
        li {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        ul {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          height: 100%;

          li {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 20.2667vw;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            font-size: 3.7333vw;
            line-height: 3.7333vw;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
            word-break: keep-all;
            margin-right: 2.1333vw;
            transition: all 0.2s ease-out;
            text-align: center;
            padding: 0 2.6667vw;
          }
          li:last-child {
            margin-right: 0;
          }
        }
      }

      .s-p-content {
        display: flex;
        flex-direction: column;
        width: 92vw;
        margin: 0 auto;
        margin-top: 2.6667vw;

        .content-media {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 51.7333vw;
          background: #000000;
          opacity: 0.3;

          img {
            width: 12.6667vw;
          }
        }

        .content-desc {
          width: 100%;
          // height: 60.5333vw;
          height: 114.6667vw;
          box-sizing: border-box;
          overflow: auto;
          padding: 0 5.3333vw;
          margin-top: 2.6667vw;

          p {
            margin: 0;
            padding: 0;
            font-size: 3.7333vw;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 5.8667vw;
            margin-bottom: 2vw;
          }
        }

        .content-desc::-webkit-scrollbar {
          // display: none;
          width: 0.8vw;
          border-radius: 0.4vw;
        }
        .content-desc::-webkit-scrollbar-track {
          border-radius: 0.4vw;
          background: rgba(0, 0, 0, 0.1);
        }
        .content-desc::-webkit-scrollbar-thumb {
          border-radius: 0.4vw;
          background: #ffffff;
        }
      }

      .s-p-nav::-webkit-scrollbar {
        display: none;
        width: 5px;
        border-radius: 3px;
      }
    }

    .m-nav-active {
      background: #1a1a1a !important;
      color: #ffffff !important;
    }
  }

  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}
</style>
